<template>
	<view class="content">
		<view class="top-box">
			<view class="bannerImg" hover-class="activeM" @click="goShopDou">
				<image src="/static/images/myBanner.jpg" mode="widthFix"></image>
			</view>

			<view class="top-box-con">
				<view class="top-box-con-t">
					<view class="top-box-con-t-item" hover-class="activeM" @click="goMessage">
						<uv-icon name='bell' size='26' color='#fff'></uv-icon>
					</view>
					<view class="top-box-con-t-item" hover-class="activeM" @click="goSetting">
						<uv-icon name='setting' size='26' color='#fff'></uv-icon>
					</view>
				</view>

				<view class="top-box-con-t1" hover-class="activeM" @click="setting">
					<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>

					<view class="top-box-con-t1-r">
						<view class="text">
							萍子0902
						</view>
						<view class="text1">
							用户ID：250123023
						</view>
						<view class="text1" style="margin-top: 0rpx;">
							IP属地：重庆
						</view>
					</view>
				</view>

				<view class="top-box-con-t2">
					每天进步一点点
				</view>

				<view class="top-box-con-t3">
					<view class="top-box-con-t3-item">
						视觉设计师
					</view>
					<view class="top-box-con-t3-item">
						视觉设计师
					</view>
					<view class="top-box-con-t3-item">
						视觉设计师
					</view>
				</view>

				<view class="top-box-con-t4">
					<view class="top-box-con-t4-item" hover-class="activeM" @click="myGz">
						<text>50</text>
						<text>关注</text>
					</view>
					<view class="top-box-con-t4-item" hover-class="activeM" @click="myGz">
						<text>50</text>
						<text>粉丝</text>
					</view>
					<view class="top-box-con-t4-item" hover-class="activeM" @click="myGz">
						<text>50</text>
						<text>互关</text>
					</view>
					<view class="top-box-con-t4-item" hover-class="activeM" @click="myGz">
						<text>50</text>
						<text>获赞</text>
					</view>
				</view>
			</view>
		</view>

		<view class="myorder">
			<view class="myorder-con">
				<view class="title">
					<view class="title-l">
						我的订单
					</view>
					<view class="title-r" hover-class="activeM" @click="goOrder(1)">
						全部订单 <uv-icon name='arrow-right' size='16' color='#9095A8'></uv-icon>
					</view>
				</view>

				<view class="title-b">
					<view class="title-b-item" hover-class="activeM" @click="goOrder(2)">
						<image src="/static/myimages/wodedaifukuan.png" mode="widthFix"></image>待付款
					</view>
					<view class="title-b-item" hover-class="activeM" @click="goOrder(3)">
						<image src="/static/myimages/wodedaifahuo.png" mode="widthFix"></image>待发货
					</view>
					<view class="title-b-item" hover-class="activeM" @click="goOrder(4)">
						<image src="/static/myimages/wodedaishouhuo.png" mode="widthFix"></image>待收货
					</view>
					<view class="title-b-item" hover-class="activeM" @click="goOrder(5)">
						<image src="/static/myimages/wodedaipingjia.png" mode="widthFix"></image>待评价
					</view>
					<view class="title-b-item" hover-class="activeM">
						<image src="/static/myimages/wodeshouhoutuikuan.png" mode="widthFix"></image>售后/退款
					</view>
				</view>
			</view>
		</view>

		<view class="myorder">
			<view class="myorder-con">
				<view class="title">
					<view class="title-l">
						我的服务
					</view>
				</view>

				<view class="title-b">
					<view class="title-b-item1" hover-class="activeM" @click="goMyZp">
						<image src="/static/myimages/wodezuoping.png" mode="widthFix"></image>我的作品
					</view>
					<view class="title-b-item1" hover-class="activeM" @click="goMyMoney">
						<image src="/static/myimages/wodeyue.png" mode="widthFix"></image>我的余额
					</view>
					<view class="title-b-item1" hover-class="activeM" @click="goRuZhu">
						<image src="/static/myimages/wodesahngjiaruzhu.png" mode="widthFix"></image>商家入驻
					</view>
					<view class="title-b-item1" hover-class="activeM" @click="goAddress">
						<image src="/static/myimages/dizhiguanli.png" mode="widthFix"></image>地址管理
					</view>
					<view class="title-b-item1" hover-class="activeM" @click="goMyZj">
						<image src="/static/myimages/wodezuji.png" mode="widthFix"></image>我的足迹
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="bottom-box-con">
				<view class="content-box1">
					<view :class="['content-box1-item',tabCurrent == item.id ? 'activeTab' : '']"
						v-for="(item,index) in tabList" :key="index" @click="clickTab(item.id)">
						{{item.name}}
						<view class="active-line" v-if="tabCurrent == item.id"></view>
					</view>
				</view>

				<view class="content-box1" v-if="tabCurrent == 2">
					<view :class="['content-box1-item',tabCurrent2 == item.id ? 'activeTab' : '']"
						v-for="(item,index) in tabList2" :key="index" @click="clickTab2(item.id)">
						{{item.name}}
						<view class="active-line" v-if="tabCurrent2 == item.id"></view>
					</view>
				</view>

				<view class="content-box1" v-if="tabCurrent == 3">
					<view :class="['content-box1-item',tabCurrent1 == item.id ? 'activeTab' : '']"
						v-for="(item,index) in tabList1" :key="index" @click="clickTab1(item.id)">
						{{item.name}}
						<view class="active-line" v-if="tabCurrent1 == item.id"></view>
					</view>
				</view>

				<view class="shop-box">
					<Waterfall :list="goodsList" :columnCount="2" :gap="10">
						<template #default="{ item }">
							<view class="shop-box-item">
								<view class="img">
									<image :src="item.image" mode="widthFix"></image>
									<view class="tip" v-if="tabCurrent == 2 && tabCurrent2 == 1">
										进行中
									</view>
									<view class="tip1" v-if="tabCurrent == 2 && tabCurrent2 == 1">
										领先
									</view>

									<!-- 	<view class="tip" style="background: #9095A8;" v-if="tabCurrent == 2 && tabCurrent2 == 1">
										已结束
									</view>
									<view class="tip1" style="background: #9095A8;" v-if="tabCurrent == 2 && tabCurrent2 == 1">
										出局
									</view> -->
								</view>

								<view class="text1" v-if="tabCurrent == 1 || tabCurrent == 3 || tabCurrent == 4">
									泡泡玛特 X 壹橙视觉 labubu和周边泡泡玛特 X 壹橙视觉 labubu和周边
								</view>

								<view class="text1-copy" v-if="tabCurrent == 2 && tabCurrent2 == 1">
									<view class="paimai">
										拍卖
									</view>
									泡泡玛特 X 壹橙视觉 labubu和周边泡泡玛特 X 壹橙视觉 labubu和周边
								</view>

								<view class="text1-copy" v-if="tabCurrent == 2 && tabCurrent2 == 2">
									<view class="paimai" style="background-color: #182033;color:#fff">
										众筹
									</view>
									泡泡玛特 X 壹橙视觉 labubu和周边泡泡玛特 X 壹橙视觉 labubu和周边
								</view>

								<view class="text2-copy" v-if="tabCurrent == 2 && tabCurrent2 == 1">
									<view class="text2-copy-item1">
										可鉴定
									</view>
									<view class="text2-copy-item2">
										假一赔十
									</view>
								</view>

								<view class="text3" v-if="tabCurrent == 2 && tabCurrent2 == 1">
									<view class="text3-l">
										出价 <span style="color: #E90D00;font-size: 24rpx;font-weight: 600;">￥5000</span>
									</view>
									<view class="text3-r">
										￥5699.00起
									</view>
								</view>

								<view class="text2" v-if="tabCurrent == 1 || tabCurrent == 3 || tabCurrent == 4">
									<view class="text2-l">
										<view class="avatar">
											<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
										</view>

										<view class="nickname">
											布果chacoco布果chacoco
										</view>

									</view>
									<view class="text2-r">
										<!-- <uv-icon name="heart" color="#828999" size="24"></uv-icon> -->
										<!-- 点击收藏 -->
										<uv-icon name="heart-fill" color="#fa2800" size="18"></uv-icon>
										12
									</view>
								</view>

								<block v-if="tabCurrent == 2 && tabCurrent2 == 2">
									<view class="text2-jindu">
										<view class="text2-l">
											<view class="jindu">
												<view class="jindu-cover">
													<view class="huo">
														<image src="/static/images/zhongchouhuo.png" mode="widthFix">
														</image>

														<!-- <image src="/static/images/zhongchouhuobao.png" mode="widthFix"></image> -->
													</view>
												</view>
											</view>
										</view>
										<view class="text2-r">
											进度112%
										</view>
									</view>

									<view class="text3-jindu">
										1053人支持
									</view>

									<view class="support">
										<view class="support-l">
											￥69.90
										</view>

										<view class="support-r" hover-class="activeM">
											去支持
										</view>
									</view>
								</block>

							</view>
						</template>
					</Waterfall>


				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Waterfall from '@/components/Waterfall.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'

	const tabList = ref([{
		id: 1,
		name: '我的帖子'
	}, {
		id: 2,
		name: '我的参与'
	}, {
		id: 3,
		name: '点赞'
	}, {
		id: 4,
		name: '收藏'
	}])
	const tabList1 = ref([{
		id: 1,
		name: '作品'
	}, {
		id: 2,
		name: '帖子'
	}, {
		id: 3,
		name: '众筹'
	}])
	const tabList2 = ref([{
		id: 1,
		name: '拍卖'
	}, {
		id: 2,
		name: '众筹'
	}])
	const tabCurrent = ref(1)
	const tabCurrent1 = ref(1)
	const tabCurrent2 = ref(1)

	const goodsList = ref([{
			image: 'https://picsum.photos/id/1011/200/300',
		},
		{
			image: 'https://picsum.photos/id/1012/200/400',
		},
		{
			image: 'https://picsum.photos/id/1013/200/500',
		},
		{
			image: 'https://picsum.photos/id/1014/200/350',
		},
		{
			image: 'https://picsum.photos/id/1015/200/450',
		},
		{
			image: 'https://picsum.photos/id/1016/200/600',
		},
	])

	const clickTab = (id) => {
		tabCurrent.value = id
	}

	const clickTab1 = (id) => {
		tabCurrent1.value = id
	}

	const clickTab2 = (id) => {
		tabCurrent2.value = id
	}

	const goMyZp = () => {
		uni.navigateTo({
			url: '/subpackages/my/myZp'
		})
	}

	const myGz = () => {
		uni.navigateTo({
			url: '/subpackages/my/myGz'
		})
	}

	const goMyZj = () => {
		uni.navigateTo({
			url: '/subpackages/my/myZj'
		})
	}

	const setting = () => {
		uni.navigateTo({
			url: '/subpackages/my/setting'
		})
	}

	const goMessage = () => {
		uni.navigateTo({
			url: '/subpackages/my/messageCenter'
		})
	}

	const goMyMoney = () => {
		uni.navigateTo({
			url: '/subpackages/my/myMoney'
		})
	}

	const goSetting = () => {
		uni.navigateTo({
			url: '/subpackages/my/mySetting'
		})
	}

	const goAddress = () => {
		uni.navigateTo({
			url: '/subpackages/my/address'
		})
	}

	const goOrder = (id) => {
		uni.navigateTo({
			url: '/subpackages/my/order?id=' + id
		})
		// https://yl.yuelujy.com
	}

	const goRuZhu = () => {
		uni.navigateTo({
			url: '/subpackages/my/ruzhu'
		})
		// https://yl.yuelujy.com
	}

	const goShopDou = () => {
		uni.navigateTo({
			url: '/subpackages/my/shopDou'
		})
	}
</script>

<style>
	page {
		background-color: #f2f3f7;
	}
</style>
<style lang="scss" scoped>
	.top-box {
		position: relative;
		width: 100%;
		height: 656rpx;

		.bannerImg {
			width: 100%;

			image {
				width: 100% !important;
				height: 656rpx !important;
			}
		}



		.top-box-con {
			position: absolute;
			top: 0;
			width: 100%;
			height: 556rpx;
			padding-top: 88rpx;

			.top-box-con-t {
				width: 100%;
				height: 88rpx;
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 50rpx;
			}

			.top-box-con-t1 {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0rpx 30rpx;

				image {
					width: 120rpx !important;
					height: 120rpx !important;
					border-radius: 60rpx !important;
				}

				.top-box-con-t1-r {
					width: calc(100% - 120rpx);
					padding-left: 20rpx;

					.text {
						width: 100%;
						font-weight: 600;
						font-size: 30rpx;
						color: #FFFFFF;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text1 {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #FEBBA5;
						margin-top: 10rpx;
					}
				}
			}

			.top-box-con-t2 {
				width: 100%;
				margin-top: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 0rpx 30rpx;
			}

			.top-box-con-t3 {
				width: 100%;
				padding: 0rpx 30rpx;
				margin-top: 10rpx;
				display: flex;
				gap: 20rpx;

				.top-box-con-t3-item {
					height: 36rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 18rpx;
					padding: 0rpx 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFF4EF;
				}
			}

			.top-box-con-t4 {
				width: 100%;
				margin-top: 40rpx;
				display: flex;

				.top-box-con-t4-item {
					width: 25%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}



	.myorder {
		width: 100%;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;

		.myorder-con {
			width: 100%;
			padding: 30rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-color: #fff;

			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #eee;
				padding-bottom: 30rpx;

				.title-l {
					font-weight: 600;
					font-size: 30rpx;
					color: #000000;
				}

				.title-r {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #9095A8;
				}
			}

			.title-b {
				width: 100%;
				margin-top: 30rpx;
				display: flex;

				.title-b-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 10rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #182033;

					image {
						width: 48rpx !important;
						height: 48rpx !important;
					}
				}

				.title-b-item1 {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 10rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #182033;

					image {
						width: 56rpx !important;
						height: 56rpx !important;
					}
				}
			}
		}
	}

	.bottom-box {
		width: 100%;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;

		.bottom-box-con {
			width: 100%;
			padding: 30rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-color: #fff;

			.content-box1 {
				width: 100%;
				height: 96rpx;
				background: #FFFFFF;
				display: flex;
				border-bottom: 2rpx solid #eee;

				.content-box1-item {
					position: relative;
					width: 25%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 30rpx;
					color: #9095A8;
				}

				.activeTab {
					font-weight: 600;
					color: #333;
				}

				.active-line {
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 70rpx;
					height: 8rpx;
					background-color: #e90d00;
					border-radius: 4rpx;
				}
			}

			.shop-box {
				width: 100%;
				margin-top: 30rpx;

				.shop-box-item {
					box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
					padding-bottom: 10rpx;
					border-radius: 0rpx 0rpx 8rpx 8rpx;

					.img {
						position: relative;
						width: 100%;

						image {
							width: 100% !important;
							// height: 400rpx !important;
							border-radius: 8rpx 8rpx 8rpx 8rpx !important;
						}

						.tip {
							position: absolute;
							left: 0;
							top: 0;
							width: 96rpx;
							height: 40rpx;
							background: #E90D00;
							border-radius: 8rpx 0rpx 8rpx 0rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.tip1 {
							position: absolute;
							right: 0;
							top: 0;
							width: 96rpx;
							height: 40rpx;
							background: #E90D00;
							border-radius: 0rpx 8rpx 0rpx 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}


					.text1 {
						width: 100%;
						margin: 20rpx 0rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-weight: 600;
						font-size: 30rpx;
						color: #000000;
						padding: 0rpx 10rpx;
					}

					.text1-copy {
						display: flex;
						align-items: center;
						width: 100%;
						margin: 20rpx 0rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-weight: 600;
						font-size: 30rpx;
						color: #000000;
						padding: 0rpx 10rpx;

						.paimai {
							float: left;
							width: 60rpx;
							height: 36rpx;
							background: linear-gradient(270deg, #A14B01 0%, #271D05 100%);
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							color: #FFF7ED;
							margin-right: 10rpx;
						}
					}

					.text2 {
						width: 100%;
						display: flex;
						padding: 0rpx 10rpx;

						.text2-l {
							width: 60%;
							display: flex;
							align-items: center;
							gap: 10rpx;

							.avatar {
								width: 36rpx;
								height: 36rpx;

								image {
									width: 36rpx !important;
									height: 36rpx !important;
									border-radius: 50% !important;
								}
							}

							.nickname {
								width: calc(100% - 36rpx);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-weight: 400;
								font-size: 24rpx;
								color: #9095A8;
							}
						}

						.text2-r {
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							gap: 10rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #9095A8;
						}
					}

					.text2-copy {
						width: 100%;
						display: flex;
						padding: 0rpx 10rpx;
						gap: 10rpx;

						.text2-copy-item1 {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 108rpx;
							height: 32rpx;
							background: #41BC55;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
						}

						.text2-copy-item2 {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100rpx;
							height: 32rpx;
							background: #FFFFFF;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 2rpx solid #B5BBCA;
							font-weight: 400;
							font-size: 20rpx;
							color: #B5BBCA;
						}
					}

					.text3 {
						width: 100%;
						display: flex;
						padding: 0rpx 10rpx;
						margin-top: 10rpx;

						.text3-l {
							width: 50%;
							display: flex;
							align-items: flex-end;
							font-weight: 400;
							font-size: 20rpx;
							color: #182033;
						}

						.text3-r {
							width: 50%;
							text-align: end;
							font-weight: 400;
							font-size: 24rpx;
							color: #828999;
						}
					}


					.text2-jindu {
						width: 100%;
						display: flex;
						align-items: center;
						padding: 0rpx 10rpx;

						.text2-l {
							width: 65%;

							.jindu {
								position: relative;
								width: 90%;
								height: 16rpx;
								background: #E6E9F0;
								border-radius: 8rpx;

								.jindu-cover {
									position: absolute;
									left: 0;
									top: 0;
									width: 50%;
									height: 16rpx;
									background: linear-gradient(270deg, #EB271D 0%, #EDAAA6 100%);
									border-radius: 8rpx;

									.huo {
										position: absolute;
										right: -16rpx;
										top: -16rpx;

										image {
											width: 32rpx !important;
											height: 40rpx !important;
										}
									}
								}
							}
						}

						.text2-r {
							width: 35%;
							font-weight: 400;
							font-size: 20rpx;
							color: #E90D00;
						}
					}

					.text3-jindu {
						width: 100%;
						font-weight: 400;
						font-size: 20rpx;
						color: #9095A8;
						margin-top: 10rpx;
						padding: 0rpx 10rpx;
					}

					.support {
						width: 100%;
						padding: 0rpx 10rpx;
						display: flex;
						align-items: center;

						.support-l {
							width: calc(100% - 140rpx);
							padding-right: 10rpx;
							font-weight: 600;
							font-size: 28rpx;
							color: #E90D00;
						}

						.support-r {
							width: 140rpx;
							height: 48rpx;
							background: #E90D00;
							border-radius: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							color: #FFFFFF;
						}
					}


				}
			}
		}
	}
</style>